<div class="container" ms-controller="Home">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-4">
            <div class="task-box">
                <div class="task-box-title">
                    <button ms-click="pageToggle(0)" ms-class="now:page==0">ToDoList</button>
                    <button ms-click="pageToggle(1)" ms-class="now:page==1">DoneList</button>
                    <button class="pull-right" ms-click="add">添加</button>
                </div>
                <div class="task-box-body">
                    <div ms-repeat="list" class="task"  ms-visible="el.Check==page">

                        <!--正常状态下的-->
                        <div ms-visible="!el.Editing" ms-click="focusToggle($index)" ms-class="focus:el.Focusing">
                            <div>
                                {{el.EndTime}}
                            </div>
                            <div>
                                {{el.TaskName}}
                            </div>
                        </div>

                        <div ms-visible="el.Focusing">
                            <div ms-visible="!el.Editing">
                                <button ms-click="checkToggle($index)">
                                    <span ms-if="page==0">完成</span>
                                    <span ms-if="page==1">重新打开</span>
                                </button>
                                <button ms-click="focusToggle($index)">关闭</button>
                                <button ms-click="editToggle($index)">编辑</button>
                                <button ms-click="del($index)">删除</button>
                            </div>
                            <div ms-visible="el.Editing">
                            <button ms-click="save($index)">保存</button>
                            <button ms-click="cancel($index)">取消</button>
                        </div>

                        </div>


                        <!--编辑状态的-->
                        <div ms-visible="el.Editing" class="row">
                            <div class="col-xs-9">
                                <label for="">todo</label>
                                <input type="text" class="form-control" ms-duplex="el.TaskName">
                            </div>
                            <div class="col-xs-3">
                                <label for="">时间</label>
                                <input type="date" class="form-control" ms-duplex="el.EndTime">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>